<template>
	<view>
		<my-search @click.native="goToSearch"></my-search>
		<view class="cate">
			<scroll-view scroll-y="true" class="scroll-left" :style="{height:height+'px'}">
				<view class="left-item" :class="currentIndex == index? 'active' : ''" @click="currentIndex = index"
					v-for="(item,index) in cateList" :key="item.cat_id">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-right" :style="{height:height+'px'}">
				<view class="item-right">
					<view v-for="item in cateList[currentIndex].children" :key="item.cat_id">
						<h4>/{{item.cat_name}}/</h4>
						<view class="smallbox">
							<view v-for="(item,index) in item.children" :key="index">
								<navigator class="small-item"
									:url="`/subpkg/goods_detail/goods_detail?cid=${item.cat_id}`">
									<image :src="item.cat_icon" mode=""></image>
									<text>{{item.cat_name}}</text>
								</navigator>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				cateList: [],
				currentIndex: 0
			}
		},
		methods: {
			goToSearch() {
				console.log(1);
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			async getCateList() {
				let {
					data
				} = await uni.$http.get('/api/public/v1/categories')
				if (data.meta.status !== 200) return uni.$showMsg
				this.cateList = data.message
			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight - 30
			this.getCateList()
		}
	}
</script>

<style lang="scss">
	.cate {
		display: flex;
	}

	.scroll-left {
		width: 90px;
		background-color: beige;
		text-align: center;

		.left-item {
			width: 100%;
			padding: 15rpx;
			box-sizing: border-box;

			&.active {
				background-color: forestgreen;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					width: 5px;
					transform: translateY(-50%);
					height: 80%;
					background-color: deepskyblue;
				}
			}
		}
	}

	.scroll-right {
		flex: 1;
		text-align: center;

		h4 {
			font-size: 20px
		}



		.smallbox {
			display: flex;
			flex-wrap: wrap;

			>view {
				width: 190rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100rpx;
				}
			}

			.small-item {
				display: flex;
				padding: 5px;
				box-sizing: border-box;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>